<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
		<meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>聊天室</title>
		<!-- 重置样式 -->
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../js/select-date/Mdate.css">
		<!-- icon -->
		<link rel="stylesheet" href="../css/fonts.css">
		<link rel="stylesheet" href="../js/jquery-weui/weui.min.css">
		<link rel="stylesheet" href="../js/jquery-weui/jquery-weui.css">
		<link rel="stylesheet" href="../css/main.css">
	</head>
	<body>
		<div id="fullPage">
			<canvas id="canvas"></canvas>
		</div>
		<div class="chatContent">
			<div class="top-wrapper">
				<i class="iconfont icon-back"></i>
				<div class="search-wrapper">
					<div class="input-wrapper">
						<i class="iconfont icon-search"></i>
						<input id="search-input" class="search-input" type="search" placeholder="搜索" onsearch="searchGroup()">
					</div>
					<i id="delete-search-value" class="iconfont icon-cancel1" style="display: none;"></i>
				</div>
				<span class="search-btn">查询</span>
			</div>
			<div class="content">
				<p class="text">快速搜索聊天内容</p>
				<div class="search-condition">
					<input id="date-search" class="date" type="button" value="日期">
				</div>
			</div>

			<!-- 搜索结果内容展示 -->
			<div class="result-wrapper" style="display: none;">
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">昨天</span>
						</div>
						<div class="result-text">为您提供更好的服务</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">2019-12-03</span>
						</div>
						<div class="result-text">服务为您，您的开心就是我们最大的快乐！</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">昨天</span>
						</div>
						<div class="result-text">为您提供更好的服务</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">2019-12-03</span>
						</div>
						<div class="result-text">服务为您，您的开心就是我们最大的快乐！</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">昨天</span>
						</div>
						<div class="result-text">为您提供更好的服务</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">2019-12-03</span>
						</div>
						<div class="result-text">服务为您，您的开心就是我们最大的快乐！</div>
					</div>
				</div>
				<div class="item">
					<img class="avatar" src="../img/avatar.png">
					<div class="content">
						<div class="result-top-wrapper">
							<span class="nickname">销售顾问</span>
							<span class="date">2019-12-03</span>
						</div>
						<div class="result-text"><img class="result-image" src="../img/img01.jpeg"></div>
					</div>
				</div>
			</div>
			<!-- 搜索结果内容展示 -->
		</div>
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/jquery-weui/jquery-weui.js"></script>
		<script src="../js/select-date/iScroll.js"></script>
		<script src="../js/select-date/Mdate.js"></script>
		<script src="../js/gaoliang.js"></script>
		<script src="../js/previewImage.js"></script>
		<script>
			// 返回
			$(".icon-back").click(function() {
				history.back(-1);
			});

			// 绑定搜索框 监听搜索框的输入值
			$("#search-input").bind("input propertychange", function(event) {
				if ($("#search-input").val().length > 0) {
					$("#delete-search-value").show();
				} else {
					$("#delete-search-value").hide();
					$(".result-wrapper").hide();
				}
			});
			
			// 预览图片
			var wxScale=new WxScale({
				fullPage:document.querySelector("#fullPage"),
				canvas:document.querySelector("#canvas")
			});
			$(".result-text .result-image").each(function() {
				$(this).click(function() {
					wxScale.start(this);   //这里的this指向需要放大的这张图片
				});
			});

			// 清空搜索框内的值
			$("#delete-search-value").click(function() {
				$("#search-input").val("");
				$("#delete-search-value").hide();
				$(".result-wrapper").hide();
			});

			let searchHeight = $(".top-wrapper").height() + 20;
			$(".result-wrapper").css("top", searchHeight + "px");

			$(".search-btn").click(function() {
				var otext = $("#search-input").val();
				if (otext.length > 0) {
					$('.item .result-text').GL({
						ocolor: '#259B24', //设置关键词高亮颜色
						oshuru: otext //设置要显示的关键词
					});

					$(".result-wrapper").show();
					judgeHeight();
				} else {
					$.alert('查询条件不能为空')
				}

			});

			// 打开日历
			new Mdate("date-search", {
				//"dateShowBtn"为你点击触发Mdate的id，必填项
				acceptId: "search-input",
				//此项为你要显示选择后的日期的input，不填写默认为上一行的"dateShowBtn"
				beginYear: "2019",
				//此项为Mdate的初始年份，不填写默认为2000
				beginMonth: "",
				//此项为Mdate的初始月份，不填写默认为1
				beginDay: "",
				//此项为Mdate的初始日期，不填写默认为1
				endYear: new Date().getFullYear(),
				//此项为Mdate的结束年份，不填写默认为当年
				endMonth: new Date().getMonth() + 1,
				//此项为Mdate的结束月份，不填写默认为当月
				endDay: new Date().getDate(),
				//此项为Mdate的结束日期，不填写默认为当天
				format: "-"
				//此项为Mdate需要显示的格式，可填写"/"或"-"或".",不填写默认为年月日
			});

			// 搜索框查找群组
			function searchGroup() {
				var otext = $("#search-input").val();
				if (otext.length > 0) {
					$('.item .result-text').GL({
						ocolor: '#259B24', //设置关键词高亮颜色
						oshuru: otext //设置要显示的关键词
					});
					$(".search-input").blur();
					$(".result-wrapper").show();
					judgeHeight();
				} else {
					$.alert('查询条件不能为空')
				}
			}
			
			// 实例化加载更多
			$(".result-wrapper").infinite(20);
			
			// 模拟加载数据
			let loadingData = '<div class="item"><img class="avatar" src="../img/avatar.png">' + 
			'<div class="content"><div class="result-top-wrapper">' + 
			'<span class="nickname">销售顾问</span><span class="date">2019-12-03</span></div>' + 
			'<div class="result-text"><img class="result-image" src="../img/img01.jpeg"></div></div></div>';
			
			// 判断聊天记录内容高度 若高度超出存在滚动条 则显示加载更多
			function judgeHeight() {
				let loadingHtml = '<div class="weui-loadmore"><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加载</span></div>';
				let resultHeight = $(".result-wrapper").innerHeight();
				let itemHeight = 0;
				$(".result-wrapper .item").each(function() {
					itemHeight += $(this).innerHeight();
				});
				console.log(resultHeight,itemHeight);
				if (resultHeight < itemHeight) {
					$(".result-wrapper").append(loadingHtml);
					// 滚动加载
					var loading = false; //状态标记
					$(".result-wrapper").infinite().on("infinite", function() {
						if (loading) return;
						loading = true;
						setTimeout(function() {
							// 隐藏加载更多
							$(".weui-loadmore").remove();
							
							// 加载的数据
							$(".result-wrapper").append(loadingData);
							loading = false;
							
							// 在加载的数据尾部显示加载更多,如没有更多数据则用判断取消这段代码
							$(".result-wrapper").append(loadingHtml);
							
							// 预览图片
							$(".result-text .result-image").each(function() {
								$(this).click(function() {
									wxScale.start(this);   //这里的this指向需要放大的这张图片
								});
							});
						}, 3000); //模拟延迟
					});
				}
			}

		</script>
	</body>
</html>
